<template>
	<view>
		<!-- 顶部状态栏站位 -->
		<view :style="{height: systemBarHeight +10 + 'px'}"></view>
		<view class="flex justify-between" style="padding:10rpx  30rpx;">
			<image src="../../static/topic/7400.png" mode="aspectFit" style="width:64rpx ;height: 64rpx;" @tap="goBack">
			</image>
			<view class="buerer">关注</view>
		</view>
		<view class="flex" style="padding: 0 30rpx;">
			<u-avatar size="50" src="../../../static/cliend/plot.png" mode="square"></u-avatar>
			<view>
				<view style="color: #333333;font-size:32rpx;margin-left: 36rpx;">婷大仙儿_</view>
				<view class="flex" style="margin-top: 10rpx;">
					<view class="master">设计达人</view>
					<view class="master">美女设计师</view>
				</view>
			</view>
		</view>
		<view style="background: #FFFFFF;border-radius: 40rpx 40rpx 0rpx 0rpx;padding:30rpx 30rpx;margin-top: 20rpx;">
			<view style="color: #333333;font-size: 28rpx;">课程进行中，好友可看状态，评论等。评论内容向上循环滚动显示</view>
			<view class="agreeWith flex  align-center">
				<view class="flex align-center" v-for="(item,index) in imageIcon">
					<image :src="item" mode="aspectFit" class="imageStyle"></image>
				</view>
				<view class="isOk">我也这么想</view>
			</view>
			<view class="flex justify-center align-center" style="margin-top: 30rpx;">
				<u-album :urls="urls2"></u-album>
			</view>
			<view class="flex" style="margin-top: 30rpx;margin-left: 25rpx;">
				<view class="master" style="margin-left: 0;">设计达人</view>
				<view class="master" style="background: rgba(239,219,182,0.3);">求组队</view>
			</view>
			<!-- <view class="flex justify-between align-center" style="margin-top: 32rpx;margin-left: 25rpx;">
				<view style="color: rgba(30,30,30,0.4);font-size: 28rpx;">此类型下还有34个话题，等你加入</view>
				<image src="../../../static/cliend/@2x.png" mode="aspectFit"
					style="width: 30rpx;height: 30rpx;margin-right:30rpx;"></image>
			</view> -->
		</view>
		<!-- 评论 -->
		<!-- <comment></comment> -->
	</view>
</template>

<script>
	import comment from "@/components/comment.vue"
	export default {
		components: {
			comment
		},
		data() {
			return {
				// 系统状态栏的高度
				systemBarHeight: 0,
				imageIcon: ['../../static/topic/7275.png', '../../static/topic/193.png', '../../static/topic/194.png'],
				urls2: [
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
				],
			}
		},
		created() {
			this.getSysteminfo();
		},
		methods: {
			// 获取系统栏高度
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			goBack() {
				uni.navigateBack(1)
			},
		}
	}
</script>

<style scoped>
	.buerer {
		width: 168rpx;
		height: 72rpx;
		background: #492D22;
		border-radius: 8rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 72rpx;
		font-size: 28rpx;
	}

	.master {
		background: linear-gradient(167deg, #53EFFC 0%, #EFDBB6 100%);
		border-radius: 18rpx;
		padding: 2rpx 18rpx;
		color: #FFFFFF;
		margin-left: 36rpx;
	}

	.imageStyle {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-left: 22rpx;
	}

	.agreeWith {
		width: 628rpx;
		height: 88rpx;
		background: #E6FFFF;
		padding: 10rpx 10rpx;
		border-radius: 8rpx;
		margin-top: 20rpx;
		margin-left: 40rpx;
	}

	.isOk {
		width: 251rpx;
		height: 64rpx;
		background: linear-gradient(168deg, #53EFFC 0%, #6AE39E 100%);
		border-radius: 10rpx;
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		margin-left: 100rpx;
	}
</style>
